<template>
<div class="imgContent">
    <ImgItem @addImg = "addImg">

          <div class="item" v-for="(item,index) in imgDown_info" :key="index">
            <div class="img" @click = "addShow(item.id,index)">
                <img :src="item.imgPath">
            </div>
        <div class="text">
            <p>{{item.centent}}</p>
            <p>浏览人数：{{item.showNum}}</p>
        </div>
        </div>
        <!--不能有一样key-->
        <div class="item-after" v-for="(item,index) in 3" :key="'info'+index">
            <div></div>
        </div>

    </ImgItem>
</div>
</template>

<script>
import {imgDown,upShow} from '@/network/imgDown/imgDown'

import ImgItem from './imgItem'

export default {
    name:'imgContent',
    data(){
        return{
            imgDown_info:'',
            Page:1,
            num_page:''
        }
    },
    components:{
        ImgItem
    },
    inject:['reload'],
    methods:{
        addShow(id,index){
            //增加浏览数据
            this.imgDown_info[index].showNum++
             //屏幕会闪不友好
                //this.reload()
            upShow(id).then(res => {
                //console.log(res)
            }).catch(err => {
                console.log(err)
            })
        },
        addImg(value){
            if(value == '加载更多'){
                this.Page = this.Page+1
            }
        }
    },
   created(){
       let page = {
           page:'1',
           //页码
           num:8
           //一页的数量
       }
        imgDown(page).then(res => {
            //console.log(res)
            //res.data.result.pop()
            this.num_page = res.data.result.pop().num_page
            this.imgDown_info = res.data.result
        }).catch( err => {
            console.log(err)
        })
    },
    watch:{
        Page(newVal){
            let page = {
                page:newVal,
                //页码
                num:8
                //一页的数量
            }
            imgDown(page).then(res => {
                res.data.result.pop()
                if(newVal > this.num_page){
                    alert('没有更多数据了')
                }else{
                    res.data.result.forEach( (item,index) => {
                        this.imgDown_info.push(item)
                    })
                }
               
            }).catch( err => {
                console.log(err)
            })

        }
    }
}
</script>

<style scoped>

</style>